<template>
  <SvgPanel
    v-if="attrPanelType === AttrPanelType.Svg"
    :device-svg-num="deviceSvgData.length"
    :device-image-num="deviceImageData.length"
    :pipe-path-num="pipePathData.length"
    :label-value-num="labelValueData.length"
    :flow-path-num="flowPathData.length"
    :svg-height="svgHeight"
    :svg-width="svgWidth"
  />
  <DevicePanel v-else-if="attrPanelType === AttrPanelType.Device && devicePanelInfo" v-bind="devicePanelInfo" />
  <MultiplePanel v-else-if="attrPanelType === AttrPanelType.Multiple && multipleInfo" v-bind="multipleInfo" />
  <LabelValuePanel
    v-else-if="attrPanelType === AttrPanelType.LabelValue && labelValuePanelInfo"
    v-bind="labelValuePanelInfo"
  />
  <PipePathPanel v-else-if="attrPanelType === AttrPanelType.PipePath && pipePathPanelInfo" v-bind="pipePathPanelInfo" />
  <FlowPathPanel v-else-if="attrPanelType === AttrPanelType.FlowPath && flowPathPanelInfo" v-bind="flowPathPanelInfo" />
</template>
<script lang="ts" setup>
import { inject, ref, watch } from "vue";
import SvgPanel from "./SvgPanel.vue";
import DevicePanel from "./DevicePanel.vue";
import MultiplePanel from "./MultiplePanel.vue";
import PipePathPanel from "./PipePathPanel.vue";
import LabelValuePanel from "./LabelValuePanel.vue";
import FlowPathPanel from "./FlowPathPanel.vue";
import {
  AttrPanelType,
  DevicePanelInfo,
  FlowPathPanelInfo,
  LabelValuePanelInfo,
  MultiplePanelInfo,
  PipePathPanelInfo,
  UpdatePanelOptions,
} from "./types";
import { RootCommon, ConfigurationType } from "../types";
import { RootCommonKey } from "../types";
import type { ToggleSelectData } from "/@/components/types";

const props = defineProps<{
  curSelectData: ToggleSelectData[];
  updatePanelOptions?: UpdatePanelOptions<any>;
}>();

const { deviceSvgData, deviceImageData, pipePathData, labelValueData, svgWidth, svgHeight, flowPathData } = inject(
  RootCommonKey
) as RootCommon;

const attrPanelType = ref(AttrPanelType.Svg);
const devicePanelInfo = ref<DevicePanelInfo>();
const pipePathPanelInfo = ref<PipePathPanelInfo>();
const multipleInfo = ref<MultiplePanelInfo>();
const labelValuePanelInfo = ref<LabelValuePanelInfo>();
const flowPathPanelInfo = ref<FlowPathPanelInfo>();
watch(
  () => props.curSelectData,
  (data) => {
    if (data.length > 0) {
      if (data.length === 1) {
        if (data[0].getDeviceInfo) {
          attrPanelType.value = AttrPanelType.Device;
          devicePanelInfo.value = data[0].getDeviceInfo();
        } else if (data[0].getPipePathInfo) {
          attrPanelType.value = AttrPanelType.PipePath;
          pipePathPanelInfo.value = data[0].getPipePathInfo();
        } else if (data[0].getLabelValueInfo) {
          attrPanelType.value = AttrPanelType.LabelValue;
          labelValuePanelInfo.value = data[0].getLabelValueInfo();
        } else if (data[0].getFlowPathInfo) {
          attrPanelType.value = AttrPanelType.FlowPath;
          flowPathPanelInfo.value = data[0].getFlowPathInfo();
        }
      } else {
        attrPanelType.value = AttrPanelType.Multiple;
        let deviceNum = 0;
        let pipePathNum = 0;
        let labelValueNum = 0;
        let flowPathNum = 0;
        data.forEach((el) => {
          if (el.getPipePathInfo) {
            pipePathNum++;
          } else if (el.getDeviceInfo) {
            deviceNum++;
          } else if (el.getLabelValueInfo) {
            labelValueNum++;
          } else if (el.getFlowPathInfo) {
            flowPathNum++;
          }
        });
        multipleInfo.value = {
          pipePathNum,
          deviceNum,
          labelValueNum,
          flowPathNum,
        };
      }
    } else {
      attrPanelType.value = AttrPanelType.Svg;
    }
  },
  {
    deep: true,
  }
);
watch(
  () => props.updatePanelOptions,
  (options) => {
    if (options) {
      const { type, panelInfo } = options;
      switch (type) {
        case ConfigurationType.DeviceImage:
        case ConfigurationType.DeviceSvg:
          if (devicePanelInfo.value) {
            Object.assign(devicePanelInfo.value, panelInfo);
          }
          break;
        case ConfigurationType.PipePath:
          if (pipePathPanelInfo.value) {
            Object.assign(pipePathPanelInfo.value, panelInfo);
          }
          break;
        case ConfigurationType.LabelValue:
          if (labelValuePanelInfo.value) {
            Object.assign(labelValuePanelInfo.value, panelInfo);
          }
          break;
        case ConfigurationType.FlowPath:
          if (flowPathPanelInfo.value) {
            Object.assign(flowPathPanelInfo.value, panelInfo);
          }
          break;
      }
    }
  }
);
</script>
